<!DOCTYPE html>
<link lang="en">
<head>
    <meta charset="UTF-8" />
    <title>makrdown</title>
</head>
<script src="https://unpkg.com/marked@0.3.6"></script>
<script src="https://unpkg.com/lodash@4.16.0"></script>

<script src="../static/lib/jquery-3.2.1.min.js"></script>
<script src="/lib/jquery-3.2.1.min.js"></script>

<script src="/lib/vue.js"></script>
<script src="../static/lib/vue.js"></script>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"/>

<style type="text/css">
    html, body, #editor {
        margin: 0;
        height: 100%;
        font-family: 'Helvetica Neue', Arial, sans-serif;
        color: #333;
    }

    textarea, #editor div {
        display: inline-block;
        width: 49%;
        height: 100%;
        vertical-align: top;
        box-sizing: border-box;
        padding: 0 20px;
    }

    textarea {
        border: none;
        border-right: 1px solid #ccc;
        resize: none;
        outline: none;
        background-color: #f6f6f6;
        font-size: 14px;
        font-family: 'Monaco', courier, monospace;
        padding: 20px;
    }

    code {
        color: #f66;
    }
</style>

</head>
<body style="width:100%;padding: 7px">
<div style="width:100%;padding:7px;">
    <label style="font-size:30px;">
        <span class="glyphicon glyphicon-user"></span> 撰写新文章
    </label>


</div>

<div id="editor">
    <p style="width: fit-content;color: #0f0f0f">
        <label>标题</label>
        <input name="title" type="text" results="5" autofocus placeholder="请在此输入..."  v-model="title">
    </p>
    <p style="width: fit-content;color: #0f0f0f">
        <label>描述</label>
        <input name="description" type="text" results="5" autofocus placeholder="请在此输入..." v-model="description">
    </p>


    <textarea :value="input" @input="update" name="content" v-model="input"></textarea>
    <div v-html="compiledMarkdown" ></div>

    <p>{{input}}</p>
    <p>{{title}}</p>
    <p>{{description}}</p>
    <div>
        <button v-on:click="getData">保存</button>
    </div>
</div>

<script src="/js/markdown.js"></script>

</body>
</html>